<#assign dialogId = id>
<div class="table-container">
    <#if canManageTable>
    <div class="edit-table">
        <a id="edit-table-button-${dialogId}edit" class="fa edit-button" href="javascript: void(0);"></a>
        <a class="fa delete-button" href="javascript: ajaxDeleteButton('${dialogId}', '<@ofbizUrl>deleteTable</@ofbizUrl>', 'tableId=${table.tableId?if_exists}','${uiLabelMap.RestaurantAreYouSure}');"></a>
    </div>
    </#if>
    <div class="table-img<#if currentTableName?default("") == table.tableName> current-table<#else><#if isReserved> reserved</#if></#if>">
        <div class="title">${uiLabelMap.RestaurantTable} - ${table.tableName?if_exists}</div>
        <#if currentTableName?default("") != table.tableName>
            <#if canReserve>
            <form name="reserveTable${table.tableId?if_exists}" action="<@ofbizUrl>reserveTable</@ofbizUrl>" method="post">
                <input name="tableId" type="hidden" value="${table.tableId?if_exists}"/>
                <input name="isReserved" type="hidden" value="${isReserved?string}"/>
            </form>
            <a class="buttontext" href="javascript: document.reserveTable${table.tableId?if_exists}.submit()">${uiLabelMap.RestaurantReserve?if_exists}</a>
            </#if>
        </#if>
        <#if orderItems?has_content && canBill>
            <a class="buttontext" href="javascript: void(0)" id="checkout-table-button-${dialogId}">${uiLabelMap.RestaurantCheckout}</a>
        </#if>
    </div>
</div>
<#if orderItems?has_content>
<div id="${dialogId}" title="${uiLabelMap.RestaurantTable} ${table.tableName?if_exists}">
    <p class="error-message" id="errorMessage${dialogId}"></p>
    <form name="payTable${dialogId}" action="<@ofbizUrl>payTable</@ofbizUrl>" method="post">
        <input name="tableId" type="hidden" value="${table.tableId?if_exists}"/>
            <table class="basic-table" cellspacing="0">
              <tbody>
              <tr>
                <th >${uiLabelMap.RestaurantMenu}</th>
                <th class="amount">${uiLabelMap.RestaurantQuantity}</th>
                <th class="amount">${uiLabelMap.RestaurantPrice}</th>
              </tr>
              <#list orderItems as orderItem>
              <tr>
                <td class="">${orderItem.itemDescription}</td>
                <td class="amount">${orderItem.quantity}</td>
                <td class="amount">${(orderItem.unitPrice*orderItem.quantity)?string("0.00")}</td>
              </tr>
              </#list>
              <tr>
                <td class="amount" colspan="3">${uiLabelMap.RestaurantTotal}
                <input name="totalAmount" type="text" value="${orderSubTotal?string("0.00")}" disabled="disabled" class="text ui-widget-content ui-corner-all amount" size="4"/>
              </tr>
              <tr>
                <td class="amount" colspan="3">${vatString?default("")}
                <input name="taxTotal" type="text" value="${taxTotal?string("0.00")}" disabled="disabled" class="text ui-widget-content ui-corner-all amount" size="4"/>
              </tr>
              <tr>
                <td class="amount" colspan="3">${uiLabelMap.RestaurantGrandTotal}
                <input name="grandTotal" type="text" value="${(orderSubTotal?default(0) + taxTotal?default(0))?string("0.00")}" disabled="disabled" class="text ui-widget-content ui-corner-all amount" size="4"/>
              </tr>
              <#if hasInvoice == true>
              <tr>
                <td class="amount" colspan="3">${uiLabelMap.RestaurantCash}
                <input name="receiveAmount" type="text" value="" class="text ui-widget-content ui-corner-all amount" size="4"/></td>
              </tr>
              <tr>
                <td class="amount" colspan="3">${uiLabelMap.RestaurantChange}
                <input name="changeAmount" type="text" value="" disabled="disabled" class="text ui-widget-content ui-corner-all amount" size="4"/></td>
              </tr>
              </#if>
            </tbody>
        </table>
    </form>
    <form name="billTable${dialogId}" action="<@ofbizUrl>billTable</@ofbizUrl>" method="post">
        <input name="tableId" type="hidden" value="${table.tableId}"/>
    </form>
</div>
<script type="text/javascript">
    function payTable${dialogId} (){
        submitDialogForm("${dialogId}", document.payTable${dialogId});
        return false;
    }
    function billTable${dialogId} (){
        submitDialogForm("${dialogId}", document.billTable${dialogId});
        return false;
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 500,
      width: 500,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.RestaurantBill)}": billTable${dialogId},
        <#if hasInvoice == true>"${StringUtil.wrapString(uiLabelMap.RestaurantPay)}": payTable${dialogId},</#if>
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
        }
      },
      close: function() {
        document.payTable${dialogId}.reset();
        $("#errorMessage${dialogId}").html("");
      }
    });
    $("#checkout-table-button-${dialogId}").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
    $(document.payTable${dialogId}.receiveAmount).keyup(function (){
        $(document.payTable${dialogId}.changeAmount).val(($(this).val() - $(document.payTable${dialogId}.grandTotal).val()).toFixed(2));
    });
</script>
</#if>
<#assign dialogId = dialogId + "edit">
<div id="${dialogId}" title="${uiLabelMap.RestaurantEditTable}">
  <p id="errorMessage${dialogId}" class="error-message"></p>
  <form name="editTable${dialogId}" action="<@ofbizUrl>updateTable</@ofbizUrl>" method="post">
    <input name="tableId" type="hidden" value="${table.tableId}"
    <table class="basic-table" cellspacing="0">
          <tbody>
          <tr>
            <td class="label">${uiLabelMap.RestaurantTableName}</td>
            <td><input type="text" name="tableName" value="${table.tableName}" class="text ui-widget-content ui-corner-all"></td>
          </tr>
        </tbody>
    </table>
  </form>
</div>
<script>
    function editTable${dialogId} () {
        submitDialogForm("${dialogId}", document.editTable${dialogId});
        return false;
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 200,
      width: 500,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.RestaurantSave)}": editTable${dialogId},
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
        }
      },
      close: function() {
        document.editTable${dialogId}.reset();
        $("#errorMessage${dialogId}").html("");
      }
    });
    
    $("#edit-table-button-${dialogId}").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
  </script>